<template>
    <div class="login">
        <div class="logo-box">
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
                <h3 class="title">青少年职业测评</h3>

                <div class="tab-list">
                    <div
                        class="tab-item"
                        :class="{ active: loginType === 1 }"
                        @click="loginType = 1"
                    >账号密码登录</div>
                    <div
                        class="tab-item"
                        :class="{ active: loginType === 2 }"
                        @click="loginType = 2"
                    >验证码登录</div>
                </div>

                <el-form-item prop="telephone">
                    <el-input
                        v-model="loginForm.telephone"
                        type="text"
                        auto-complete="off"
                        placeholder="手机号"
                    >
                        <svg-icon
                            slot="prefix"
                            icon-class="user"
                            class="el-input__icon input-icon"
                        />
                    </el-input>
                </el-form-item>

                <el-form-item v-if="loginType === 1" prop="password">
                    <el-input
                        v-model="loginForm.password"
                        type="password"
                        auto-complete="off"
                        placeholder="密码"
                        @keyup.enter.native="handleLogin"
                    >
                        <svg-icon
                            slot="prefix"
                            icon-class="password"
                            class="el-input__icon input-icon"
                        />
                    </el-input>
                </el-form-item>
                <el-form-item v-if="loginType === 2" prop="msgcode">
                    <el-input
                        v-model="loginForm.msgcode"
                        auto-complete="off"
                        placeholder="短信验证码"
                        @keyup.enter.native="handleLogin"
                    >
                        <svg-icon
                            slot="prefix"
                            icon-class="password"
                            class="el-input__icon input-icon"
                        />
                    </el-input>
                    <div class="getMsgCode-btn" @click="sendMsgHandle">
                        <el-button type="primary" :disabled="btnDis">{{ btnText }}</el-button>
                    </div>
                </el-form-item>
                <div style="text-align: right;">
                    <p
                        style="color: #409eff;cursor: pointer;"
                        @click="$router.push({ name: 'register' })"
                    >注册账号</p>
                </div>
                <div style="text-align: left;">
                    <el-checkbox
                        v-model="loginForm.rememberMe"
                        style="margin:0px 0px 25px 0px;"
                    >记住密码</el-checkbox>
                </div>
                <el-form-item style="width:100%;margin-bottom: 10px;">
                    <el-button
                        class="btn-login"
                        :loading="loading"
                        size="medium"
                        type="primary"
                        style="width:100%;"
                        @click.native.prevent="handleLogin"
                    >
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--  底部  -->
        <div class="el-login-footer">
            <!-- <span>Copyright © 2021-{{ year }} jiaxiaoshe All Rights Reserved.</span> -->
        </div>
    </div>
</template>

<script setup lang="ts">
import { sendMsg, loginByMsg, login } from "@/common/apis/common";
import { ref, reactive, onUnmounted } from 'vue';
import { isPhone } from '@/utils/validate';
import { useRouter } from "vue-router";
import { useStore } from "@/store";
const validatorPhone = function (rule: any, value: string, callback: any) {
    if (value === '' || value == undefined) {
        callback(new Error('手机号不能为空'))
    } else if (!isPhone(value)) {
        callback(new Error('手机号格式错误'))
    } else {
        callback()
    }
}

const loginForm = reactive({
    telephone: "",
    username: "",
    password: "",
    rememberMe: false,
    msgcode: "", //短信验证码
})

const loginType = ref(2);

const loginRules = reactive({
    username: [{
        required: true,
        trigger: "blur",
        message: "用户名不能为空"
    }],
    password: [{
        required: true,
        trigger: "blur",
        message: "密码不能为空"
    }],
    telephone: [{
        required: true,
        validator: validatorPhone,
        trigger: "blur"
    }],
    msgCode: [{
        required: true,
        trigger: "blur",
        message: "短信验证码不能为空"
    }],
    code: [{
        required: true,
        trigger: "change",
        message: "验证码不能为空"
    }]
})

const loading = ref(false);
const redirect = ref(null);
const btnDis = ref(false);
const btnText = ref('获取验证码');
const timerID = ref(0); //计时器

const router = useRouter();
const store = useStore();

onUnmounted(() => {
    if (timerID.value) {
        clearInterval(timerID.value);
    }
})

const loginFormRef = ref();
/**
 *  cs 2021-11-27
 * 发送短信验证码
 */
const sendMsgHandle = () => {
    console.log(btnDis.value);
    if (btnDis.value) {
        return;
    }

    loginFormRef.value.validateField(["telephone"], (valid: boolean) => {
        console.log(valid)
        if (!valid) {
            btnDis.value = true;
            sendMsg(loginForm.telephone)
                .then(() => {
                    countDown();
                })
                .catch(err => {
                    btnDis.value = false;
                });
        } else {
            console.log("error submit!!");
            return false;
        }
    });
}

/**
 * cs 2021-11-27
 * 倒计时
 */
const countDown = () => {
    let timer: number = 60;
    clearInterval(timerID.value);
    btnText.value = `重新发送(${timer}s)`;
    timerID.value = window.setInterval(() => {
        if (timer == 0) {
            clearInterval(timerID.value);
            btnText.value = '重新发送';
            btnDis.value = false;
            return;
        }
        timer--;
        btnText.value = `重新发送(${timer}s)`;
    }, 1000);
}


const handleLogin = () => {
    loginFormRef.value.validate((valid: boolean) => {
        if (valid) {
            loading.value = true;
            if (loginType.value == 1) {
                login(loginForm).then(res => {
                    console.log(res);
                    router.push('/')
                    loading.value = false;
                    store.commit('user/SET_TOKEN',res.data);
                }).catch(err => {
                    loading.value = false;

                })
            } else if (loginType.value == 2) {
                loginByMsg(loginForm).then(res => {
                    console.log(res);
                    router.push('/')
                    loading.value = false;
                }).catch(err => {
                    loading.value = false;
                })
            }
        }
    })
}
</script>

<style rel="stylesheet/scss" lang="scss">
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: url(@/assets/img/login-bg.jpg);
    background-size: 100% 100%;
}

.logo-box {
    display: flex;
    width: 400px;
    height: 522px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 12px;
    .logo-left {
        height: 522px;
        img {
            height: 100%;
        }
    }
}

.tab-list {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 50px 0 40px;
    .tab-item {
        font-size: 16px;
        color: #333;
        position: relative;
        cursor: pointer;
        &.active {
            &::after {
                content: "";
                width: 40px;
                height: 3px;
                background-color: #3e83e9;
                position: absolute;
                left: 50%;
                bottom: -6px;
                transform: translateX(-50%);
                border-radius: 3px;
            }
        }
    }
}

.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #4d85ff;
    font-size: 20px;
    font-weight: normal;
}

.btn-login {
    height: 40px;
    background: #3e83e9;
    box-shadow: 0px 10px 24px 0px rgba(97, 127, 230, 0.54);
    border-radius: 35px;
}

.login-form {
    width: 100%;
    border-radius: 6px;
    background: #ffffff;
    box-sizing: border-box;
    padding: 70px 35px 5px 35px;

    .el-input {
        height: 44px;

        input {
            height: 44px;
            border: 0;

            background-color: #f7f7f7;
        }
    }

    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 2px;
    }
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}

.login-code {
    width: 33%;
    height: 38px;
    float: right;

    img {
        cursor: pointer;
        vertical-align: middle;
    }
}

.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}

.login-code-img {
    height: 44px;
}

.getMsgCode-btn {
    position: absolute;
    height: 38px;
    top: 1px;
    right: 1px;
    button {
        height: 38px;
    }
}

@media screen and (max-width: 1000px) {
    .logo-box {
        .logo-left {
            display: none;
        }
    }
}
</style>
